<template>
  <div class="relative w-full leading-none">
    <img src="https://jwc-static.jdwxk.com/imgs/home/banner.png" class="w-full" alt="">
    <img
      src="https://jwc-static.jdwxk.com/imgs/home/banner-mask.png"
      class="absolute bottom-0 w-full"
    >
    <div class="absolute top-5 w-full">
      <div class="flex items-center justify-between gap-2 p-x-3">
        <div class="w-80% flex items-center gap-2 text-#F9F2C7" @click.stop="handleGoToUserDetail">
          <div class="h-8 w-8 rounded-50%">
            <van-image
              v-if="userInfo.headPic"
              round
              width="32px"
              height="32px"
              :src="fileBaseUrl + userInfo.headPic"
            />
            <!-- <img :src="fileBaseUrl + userInfo.headPic" class="h-8 w-8 rounded-50%" alt=""> -->
          </div>
          <span>{{ userInfo.name }}</span>
          <div class="flex border border-#F9F2C7 rounded-5 border-solid p-x-2 p-y-1 text-nowrap">
            <span class="text-3">当前积分:{{ userInfo.score }}</span>
          </div>
          <div class="i-ep:arrow-right-bold m-l--1 shrink-0" />
        </div>
        <div class="flex flex-1 items-center gap-1 text-nowrap text-#fff">
          <img src="https://jwc-static.jdwxk.com/imgs/home/point.png" class="h-3" alt="">
          <span>景坞村</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useUserStoreWidthOut } from '@/store/modules/user'

const router = useRouter()
function handleGoToUserDetail() {
  router.push('/user')
}
const fileBaseUrl = import.meta.env.VITE_GLOB_IMG_URL
const userStore = useUserStoreWidthOut()

const userInfo = computed(() => userStore.getUserInfo)
userStore.GetUserInfo()
</script>

<style lang="less" scoped></style>
